Using the List Box Item Container prefabs

Use the List Box Item Container prefabs to change the appearance of the currently selected item in a list box. For example, to highlight the selected item you can make it slightly larger than the other items or change its background color.

For an example of how to use List Box Item Container 3D to set the appearance of the selected item in a Trajectory List Box 3D node, see the Trajectory list box example.

Using a List Box Item Container to set the appearance of the selected item of a list box

To use a List Box Item Container to set the appearance of the selected item of a list box:

1. In the Project press Alt and right-click Prefabs and select List Box Item Container 2D or List Box Item Container 3D. List Box Item Container must always be a prefab. See Using prefabs.
   Use List Box Item Container 2D with Grid List Box 2D nodes and List Box Item Container 3D with Grid List Box 3D and Trajectory List Box 3D nodes. See Using the Grid List Box nodes and Using the Trajectory List Box 3D node.
   For example, create a List Box Item Container 2D.
   
2. In the Project > Prefabs select the List Box Item Container 2D and in the State Tools create a State Manager with two states. See Creating state managers.
   For example, name one state NotSelected and the other Selected. The Selected state defines the state of your application when an item in the list box is selected, the NotSelected state when the item is not selected.
   
3. In the State Tools click <No Controller Property>, select the List Box Item Container > Selected property, and set the value of the controller property for each state.
   For example, for the Selected state set the value to True and for the NotSelected state leave the value set to False.
   In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
   
   
4. In the Project select the List Box Item Container 2D prefab and in the Properties add and set the properties the values of which you want to change when an item is selected. Save different values of the properties to each of the states you created in the previous step. You can also add nodes to the List Box Item Container 2D prefab and make them visible only for the selected item.
   For example, to change the background color of the selected item and make an image appear over it:
   1. Create two color brushes, one for the background of the selected item and another one for the background of the other items. See Creating color brushes.
      For example, create one Color Brush called NotSelectedItemBackground and another lighter one called SelectedItemBackground.
      
   2. In the Project press Alt and right-click the List Box Item Container 2D prefab, select Image, and in the Properties:
      • Set the Image property to the image you want the Image node to show.
      • Add the Visible property.
      • (Optional) Add and set the image size and position properties. See Using the Image node.
      
   3. In the Project select the List Box Item Container 2D prefab and in the Properties add the Background Brush property and set it to NotSelectedItemBackground. In the State Tools click below the NotSelected state to save the property value to that state. Then set the Background Brush property to SelectedItemBackground and save the value to the Selected state.
   4. In the Project select the List Box Item Container 2D > Image prefab and in the Properties enable the Visible property. In the State Tools click below the Selected state to save the property value to that state.
   5. In the State Tools click Edit State Manager to deactivate the State Tools.

   The Selected state now has a lighter background and an image, and the NotSelected state has a darker background with no image.
   
   

5. Set the List Box Item Container as the Item Container Template of a list box node.
   For example, use the List Box Item Container 2D prefab to set the appearance of the selected item in a Grid List Box 2D:
   1. Select or create a Grid List Box 2D node and add items to it. See Using the Grid List Box nodes.
      For example, create a Grid List Box 2D node called ContactsList and use it as a container to present address book contacts.
      
      
   2. In the Project select the Grid List Box 2D node the selected item of which you want to change and in the Properties add and set the Item Container Template property to the List Box Item Container prefab that you want to use.
      For example, select the ContactsList node and in the Properties add and set the Item Container Template property to List Box Item Container 2D.
      The Item Container Template property allows you to share functionality between the items in a list box. When you set the Item Container Template property, each item in the list box inherits the functionality from the List Box Item Container node. For example, the Item Container Template can contain a state manager which changes the scale of the selected item in the list box. This way you do not need to set the functionality for each item.
      
      In the Preview when you click an item in the ContactsList to select it, its appearance changes.
      

Using the List Box Item Container 3D prefab in the API

For details, see the ListBoxItemContainer3D class in the API reference.

Using the List Box Item Container 2D prefab in the API

For details, see the ListBoxItemContainer2D class in the API reference.

See also

Using the Grid List Box nodes

Using the Trajectory List Box 3D node

Using prefabs

Open topic with navigation